﻿<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/general.xhtml">
   
   <ui:define name="title"><h:outputText value="Please Sign Up" /></ui:define>
   <ui:define name="header"><h:outputText value="Please Sign Up" /></ui:define>             
   
   <ui:define name="content">
        <h:form id="signUpForm">
        	<p:focus />	
        	<p:fieldset styleClass="fieldset" legend="Registration Form">
        		
        		<p:messages id="messages" globalOnly="true" />
        		<h:panelGrid id="regPanelGrid" bgcolor="#FF9933" style="margin: auto; margin-top: 25px; text-align: right; border-radius: 22px 22px 22px 22px;" cellspacing="8" columns="3" border="0">
        			
        			<h:panelGroup>
                        	<h:outputText value="First Name:" />
                            <h:outputText style="color: red" value="*  " /> 
                    </h:panelGroup>
	        		<p:inputText id="firstName" value="#{user.firstName}" required="true" label="First Name" title="Enter your First Name!" >
	        			<f:validateLength minimum="2" />
	        			<p:ajax event="keyup" update="firstNameMsg" global="false"/>
	        		</p:inputText>
	                <h:panelGroup>
	                	<p:message id="firstNameMsg" for="firstName" />
	                	<p:tooltip for="firstName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
        			</h:panelGroup>
        			
        			<h:panelGroup>
                        	<h:outputText value="Last Name:" />
                            <h:outputText style="color: red" value="*  " /> 
                    </h:panelGroup>
	        		<p:inputText id="lastName" value="#{user.lastName}" required="true" label="Last Name" title="Enter your Last Name!" >
	        			<f:validateLength minimum="2" />
	        			<p:ajax event="keyup" update="lastNameMsg" global="false"/>
	        		</p:inputText>
	        		<h:panelGroup>
	        			<p:message id="lastNameMsg" for="lastName" />
	                	<p:tooltip for="lastName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
        			</h:panelGroup>
        			
        			<h:panelGroup>
                        	<h:outputText value="User Name:" />
                            <h:outputText style="color: red" value="*  " /> 
                    </h:panelGroup>
	        		<p:inputText id="userName" value="#{user.userName}" required="true" label="User Name" title="Enter your User Name!" >
	        			<f:validateLength minimum="2" />
	        			<p:ajax event="keyup" update="userNameMsg" global="false" listener="#{userService.checkAvailability}"/>
	        		</p:inputText>
	        		<h:panelGroup>
	        			<p:message id="userNameMsg" for="userName" />
	                	<p:tooltip for="userName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
        			</h:panelGroup>
        				                
	                <h:panelGroup>
                        	<h:outputText value="Enter Password:" />
                            <h:outputText style="color:red" value="*  " />
                    </h:panelGroup>                    
	                <p:password id="pass1" value="#{user.password}" required="true" label="Password" title="Please enter a password!" feedback="true" match="pass2" >
	                	<f:validateLength minimum="2" />
	                </p:password>
	                <p:message id="pass1Msg" for="pass1" />
	                	                  	                
	                <h:panelGroup>
                        	<h:outputText value="Re-enter Password:" />
                            <h:outputText style="color:red" value="*  " />
                    </h:panelGroup>                  
	                <p:password id="pass2" required="true" label="Password" title="Please re-enter the password!" />	               
	                <p:message id="pass2Msg" for="pass2" />
	                	                
	                <p:commandButton id="backToSignIn" action="backToSignIn" immediate="true" icon="ui-icon-arrowthick-1-w" value="Back" />
	                <p:commandButton id="submitButton" action="confirmSignUp" update="regPanelGrid,messages" icon="ui-icon-plus" value="Sign Up" />
                </h:panelGrid>
        	</p:fieldset>
        </h:form>
        
        </ui:define>             
                
</ui:composition>
